// 7.17.26 Báo cáo nhập xuất tồn k

import React, { useState } from "react";
import { BasicForm, useForm, FormSchema } from "@/components/Form";
import { useTranslation } from "react-i18next";
import type { RadioChangeEvent } from "antd";
import { Radio, Space } from "antd";
const radioArr = [
	{
		label: "Option A",
		value: "A",
		children: [
			{
				label: "Option A-Item1",
				value: "Option A-Item1"
			},
			{
				label: "Option A-Item2",
				value: "Option A-Item2"
			},
			{
				label: "Option A-Item3",
				value: "Option A-Item3"
			},
			{
				label: "Option A-Item4",
				value: "Option A-Item4"
			},
			{
				label: "Option A-Item5",
				value: "Option A-Item5"
			},
			{
				label: "Option A-Item6",
				value: "Option A-Item6"
			}
		]
	},
	{
		label: "Option B",
		value: "B",
		children: [
			{
				label: "Option B-Item1",
				value: "Option B-Item1"
			},
			{
				label: "Option B-Item2",
				value: "Option B-Item2"
			},
			{
				label: "Option B-Item3",
				value: "Option B-Item3"
			},
			{
				label: "Option B-Item4",
				value: "Option B-Item4"
			},
			{
				label: "Option B-Item5",
				value: "Option B-Item5"
			},
			{
				label: "Option B-Item6",
				value: "Option B-Item6"
			}
		]
	},
	{
		label: "Option C",
		value: "C",
		children: [
			{
				label: "Option C-Item1",
				value: "Option C-Item1"
			},
			{
				label: "Option C-Item2",
				value: "Option C-Item2"
			},
			{
				label: "Option C-Item3",
				value: "Option C-Item3"
			},
			{
				label: "Option C-Item4",
				value: "Option C-Item4"
			},
			{
				label: "Option C-Item5",
				value: "Option C-Item5"
			},
			{
				label: "Option C-Item6",
				value: "Option C-Item6"
			}
		]
	}
];
export default function index() {
	const { t } = useTranslation();
	const [radioArrChild, setRadioArrChild] = useState([]);
	const formSchemaTop: FormSchema[] = [
		{
			label: t("felix_ui.month"),
			field: "month",
			component: "DatePicker"
		},
		{
			label: t("kevin_ui.year"),
			field: "year",
			component: "DatePicker"
		},
		{
			label: t("felix_ui.date_from"),
			field: "date_from",
			component: "DatePicker"
		},
		{
			label: t("felix_ui.date_to"),
			field: "date_to",
			component: "DatePicker"
		},
		{
			label: t("felix_ui.gruop_id"),
			field: "gruop_id",
			component: "Select",
			componentProps: {
				options: [
					{
						label: t("暂无字典"),
						value: "0"
					}
				]
			}
		},
		{
			label: t("felix_ui.department"),
			field: "department",
			component: "Select",
			componentProps: {
				options: [
					{
						label: t("暂无字典"),
						value: "0"
					}
				]
			}
		},
		{
			label: t("felix_ui.order"),
			field: "order",
			component: "Select",
			componentProps: {
				options: [
					{
						label: t("暂无字典"),
						value: "0"
					}
				]
			}
		},
		{
			label: t("kevin_ui.form"),
			field: "form",
			component: "Select",
			componentProps: {
				options: [
					{
						label: t("暂无字典"),
						value: "0"
					}
				]
			}
		}
	];
	const [formTop] = useForm({
		schemas: formSchemaTop,
		showActionButtonGroup: true,
		showAdvancedButton: false,
		labelWidth: 100,
		baseColProps: { span: 12 },
		actionColOptions: { span: 24 }
	});

	const onChange = (e: RadioChangeEvent) => {
		console.log("radio checked", e);
		radioArr.map((item: any) => {
			if (e.target.value == item.value) {
				setRadioArrChild(item.children);
			}
		});
	};
	return (
		<div className="page flex">
			<div className="w-30%">
				<div className="h-40% block overflow-auto p4">
					<BasicForm register={formTop} labelWrap={true}></BasicForm>
				</div>
				<div className="block mt-4 p4 overflow-auto" style={{ height: "calc(60% - 16px)" }}>
					<Radio.Group onChange={onChange}>
						<Space direction="vertical">
							{radioArr.map((item: any) => {
								return (
									<Radio key={item.value} value={item.value}>
										{item.label}
									</Radio>
								);
							})}
						</Space>
					</Radio.Group>
				</div>
			</div>
			<div className="block ml-4" style={{ width: "calc(70% - 16px)" }}>
				<Radio.Group>
					<Space direction="vertical">
						{radioArrChild.map((item: any) => {
							return (
								<Radio key={item.value} value={item.value}>
									{item.label}
								</Radio>
							);
						})}
					</Space>
				</Radio.Group>
			</div>
		</div>
	);
}
